
import React, { Component } from "react";
import { Carousel, Image, Typography, Divider, Table, Rate, Tabs, DatePicker,Input, Button, Tree, Descriptions, Spin, Select, Timeline,
          Popconfirm, message  } from 'antd';
import { s } from '../../assets/images/111.jpeg'
import styles from './peopleLive.css';
import { ArrowUpOutlined, ArrowDownOutlined, RedoOutlined, InfoCircleOutlined, ClockCircleOutlined, CheckCircleOutlined, AlertOutlined } from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import echarts from 'echarts/lib/echarts';
import {dateFormater} from '../../utils/utils'
import ReactEcharts from 'echarts-for-react';
const { TabPane } = Tabs;
const { Option } = Select;
const contentStyle = {
  height: '600px',
  color: '#fff',
  lineHeight: '600px',
  textAlign: 'center',
};
const contents ={
  width:'90%',
  margin:'0 auto'
}
const { Title } = Typography;
var ops1 = {};
var ops2 = {};

const timeLineData =[
  {
    key:'001',
    color: 'blue',
    line1:'问题申请立项',
    line2:'立项提交',
    line3:'2022-12-25 10:00:00',
  },
  {
    key:'002',
    color: 'blue',
    line1:'问题立项,准备调解人员',
    line2:'2023-01-03 12:30:00',
    line3:'',
  },
  {
    key:'003',
    color: 'blue',
    line1:'人员进行调解',
    line2:'2023-02-01 10:07:26',
    line3:'',
  },
  {
    key:'004',
    color: 'red',
    line1:'双方争执,问题搁置',
    line2:'2023-02-08 14:30:00',
    line3:'',
  }, 
  {
    key:'005',
    color: 'blue',
    line1:'问题重启调解',
    line2:'2023-02-08 14:30:00',
    line3:'',
  }, 
  {
    key:'006',
    color: 'green',
    line1:'问题妥善解决',
    line2:'2023-02-08 14:30:00',
    line3:'',
  },

];

const views =[ '未央区朱宏路2号地下水渗出','高新区锦业路路灯坏掉','浐灞区浐河中段污染物较多','临潼区兵马俑景区游客聚集拥挤','雁塔区电子正街交通信号灯异常','小寨十字道路拥挤','大悦城附近有垃圾待清理','西安市供水局管道维修停水','方欣市场道路出现坍塌','新城区车站门口道路有问题','西咸新区子午大道淤泥待清理']

const des =[
  {
    name: '养老维修服务',
    phone:'13258749632',
    level:'3级',
    company:'养老保障局',
    address:'西安市未央区桃园路双府街道56号3楼A01',
    category:'生活类'
  },
  {
    name: '医疗调解',
    phone:'13884749672',
    level:'2级',
    company:'西安市医疗局',
    address:'西安市莲湖区丈八北路草堂街道142号6楼B28',
    category:'生活类'
  },
  {
    name: '贫困金监察',
    phone:'18569203228',
    level:'1级',
    company:'西安市劳动局',
    address:'西安市雁塔区小寨北路草堂街道159号2楼028号',
    category:'生活类'
  },  
  {
    name: '工程检测',
    phone:'17725814006',
    level:'2级',
    company:'西安市工程造价局',
    address:'西安市雁塔区小寨路堂鱼街道19号7楼14号',
    category:'工程类'
  },  
  {
    name: '经济纠纷',
    phone:'15274859632',
    level:'3级',
    company:'莲湖区桃园路派出所',
    address:'西安市莲湖区桃源路斗鱼街道1号23楼14号',
    category:'民生类'
  },
  {
    name: '基础设施问题',
    phone:'17452896325',
    level:'3级',
    company:'莲湖区开远门A口西二环辅路破损严重',
    address:'西安市莲湖区莲湖区开远门A口西二环辅路北段',
    category:'民生类'
  },
  {
    name: '基础设施问题',
    phone:'15236520027',
    level:'3级',
    company:'雁塔区唐延路物业公司',
    address:'雁塔区唐延路17号禾盛京广中心13楼',
    category:'商业类'
  },  
  {
    name: '经济问题',
    phone:'15274859632',
    level:'3级',
    company:'莲湖区桃园路派出所',
    address:'西安市莲湖区桃源路斗鱼街道1号23楼14号',
    category:'民生类'
  },
  {
    name: '路灯损坏',
    phone:'17452896325',
    level:'3级',
    company:'莲湖区开远门A口西二环辅路破损严重',
    address:'西安市莲湖区莲湖区开远门A口西二环辅路北段',
    category:'民生类'
  },
  {
    name: '物业服务问题',
    phone:'15236520027',
    level:'3级',
    company:'雁塔区唐延路物业公司',
    address:'雁塔区唐延路17号禾盛京广中心13楼',
    category:'商业类'
  },  
]

const treeData = [
  {
    title: '问题大类',
    key: '0-0',
    children: [
      {
        title: '生活类别',
        key: '0-0-0',
        children: [
          {
            title: '养老服务',
            key: '0-0-0-0',
            children:[
              {
                title: '养老院维修',
                key: '0-0-0-0-0',
              }
            ]
          },
          {
            title: '医疗纠纷',
            key: '0-0-0-1',
            children:[
                {
                  title: '医患关系调解',
                  key: '0-0-0-1-0',
                  disableCheckbox: false,
                },
                {
                  title: '防疫状况',
                  key: '0-0-0-1-1',
                  disableCheckbox: false,
                }
            ]
          },
          {
            title: '贫困金发放',
            key: '0-0-0-2',
            children:[
              {
                title: '发放情况核实',
                key: '0-0-0-2-0',
                disableCheckbox: false,
              },
              {
                title: '监督监察',
                key: '0-0-0-2-1',
                disableCheckbox: false,
              }
          ]
          },          
        ],
      },
      {
        title: '工程类别',
        key: '0-0-1',
        children: [{ title: '工程进度监测', key: '0-0-1-0' }],
      },
      {
        title: '交通类别',
        key: '0-0-2',
        children: [{ title: '城市拥堵状况', key: '0-0-2-0' }],
      }, 
      {
        title: '基础设施类别',
        key: '0-0-3',
        children: [{ title: '道路损坏状况', key: '0-0-3-0' }],
      },  
      {
        title: '宣传类别',
        key: '0-0-4',
        children: [{ title: '防疫宣传', key: '0-0-4-0' }],
      },  
      {
        title: '生态监测类别',
        key: '0-0-5',
        children: [{ title: '农业烟雾监测', key: '0-0-5-0' }],
      },                   
    ],
  },
];

export default class extends Component {
  constructor() {
    super();
    this.state = {
      img1: 'src/assets',
      data:[],
      data2:[],
      data3:[],
      loading:false,
      loadings: false,
      descriptions:{},
      names:'',
      total1:0,
      total2:0,
      total3:0,
      defaultDate:null,
      timeLineList:[],
      columns:[
        { title: '问题ID', dataIndex: 'id', key: 'id',width:130,render:(_,record) => <a>{record.id}</a> },
        { title: '问题名称', dataIndex: 'name', key: 'name',width:220,ellipsis:true },
        { title: '问题数量', dataIndex: 'income', key: 'income',align:'center' },  
        { title: '问题类型', dataIndex: 'type', key: 'type',width:110,ellipsis:true},  
        { title: '处理政策', dataIndex: 'policy', key: 'policy',width:130,ellipsis:true },  
        { title: '涉及人数', dataIndex: 'age', key: 'age' },
        { title: '同比幅度', dataIndex: 'compared', key: 'compared' },
        { title: '严重程度', dataIndex: 'severity', key: 'severity', },
        { title: '创建时间', dataIndex: 'startTime', key: 'startTime',width:130,ellipsis:true },
        { title: '完成时间', dataIndex: 'endTime', key: 'endTime',width:130,ellipsis:true},
        { title: '发生地点', dataIndex: 'address', key: 'address',width:130,ellipsis:true },
        { title: '状态', dataIndex: 'status', key: 'status' },
        {
          title: '操作',
          dataIndex: '',
          width:150,
          key: 'x',
          render: () => {
            return(
              <span>
                  <Popconfirm
                    title="确定处置这条数据吗？"
                    onConfirm={this.confirms}
                    onCancel={this.cancels}
                    okText="确定"
                    cancelText="取消">
                    <a style={{marginRight:6}} href="#">处理</a>
                  </Popconfirm>      
                  <Popconfirm
                    title="确定处置这条数据吗？"
                    onConfirm={this.ignore}
                    onCancel={this.cancels}
                    okText="确定"
                    cancelText="取消">
                    <a style={{marginRight:6}} href="#">忽略</a>
                  </Popconfirm>
                  <Popconfirm
                    title="确定处置这条数据吗？"
                    onConfirm={this.appeal}
                    onCancel={this.cancels}
                    okText="确定"
                    cancelText="取消">
                    <a style={{marginRight:6}} href="#">申诉</a>
                  </Popconfirm>           
              </span>
            )
          },
        },
      ]
    };
  }

  componentDidMount() {
    this.updateData();
    this.getOps();
    this.getDescriptions();   
    window.scrollTo(0, 0); 
  }

  getOps = () =>{

  }

  confirms = () => {
    message.success('数据处理成功!');
    this.updateData();
  };

  ignore= () => {
    message.success('数据忽略成功!');
    this.updateData();
  };

  appeal= () => {
    message.success('数据申诉成功!');
    this.updateData();
  };

  cancels = () => {
    
  };

  updateData = (oos) =>{
    this.setState({ 
      loading: true,
      data:[],
      data2:[],
      data3:[],
      total1:0,
      total2:0,
      total3:0,
     });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
      this.getDatas(oos);
      this.getDatas2();
      this.getDatas3();      
    }, 1000);
  }

  callback = (key) => {
    console.log(key);
  }

  onDateChange = (date, dateString) => {

    this.setState({defaultDate:date},()=>{
      this.updateData();
    })
    console.log(date, dateString,);
  }

  nameChange = (e) =>{
    console.log('eee',e.target.value);
    this.setState({names:e.target.value})
  }

  onPressEnter = (e) =>{
    this.updateData();
  }

  reset = () =>{
    this.setState({names:'',defaultDate:''},()=>{
      this.updateData();
    })
  }

  getDatas = (oos)=>{
    let datas= [];
    let timer =  dateFormater("YYYY-mm-dd HH:MM:SS",new Date());
    let count = Math.random() * 10 > 5 ? 2: Math.random()
    const slice = timeLineData.slice(0,count);
    for (let i = 0; i < 14; i++) {
      datas.push({
          key: i,
          id: 'WT00'+Math.floor(Math.random() * 10000000),
          name: views[Math.floor(Math.random() * 10)],
          income: Math.floor(Math.random() * 10)+'个',
          policy:i%3 == 0 ? '《民法典》相关政策':'《西安市基础民生管理办法规定2020版》',
          type: des[Math.floor(Math.random() * 10)]['name'],
          age:  Math.floor(Math.random() * 100)+' 人',
          startTime: timer,
          endTime: `2023-0${Math.floor(Math.random() * 10)}-0${Math.floor(Math.random() * 10)} 1${Math.floor(Math.random() * 10)}: 2${Math.floor(Math.random() * 10)}: 0${Math.floor(Math.random() * 10)}`,
          status:'未处理',
          compared: i%2 == 0 ? <span style={{color:'#3f8600'}}><ArrowUpOutlined style={{color:'#3f8600'}} />{Math.floor(Math.random() * 10)+'%'}</span> : <span style={{color:'#cf1322'}}><ArrowDownOutlined style={{color:'#cf1322'}}/>{Math.floor(Math.random() * 10)+'%'}</span> ,
          address: Math.floor(Math.random() * 100) >= 50 ? `西安市雁塔区锦业路第${i}号` : `西安市高新区锦业${i}路第${i+12}号`,
          description: i%2 == 0 ? '景区人员拥挤，注意防疫': '景区人员稀疏,安全系数高',
          star:  i%2 == 0 ? <Rate disabled style={{marginLeft:5}} defaultValue={3} /> : <Rate disabled style={{marginLeft:5}} defaultValue={5} />,
          grade: Math.floor(Math.random() * 10)+'级',
          ranking: Math.floor(Math.random() * 100),
          severity: i%2 == 0 ? <span style={{color:'#f36052'}}>严重</span> : <span style={{color:'#f9e681'}}>轻微</span>,
          progress: slice
      });
    };
    let filters = [];
    if(this.state.names === ''){
      filters = datas;
    }else{
      datas.forEach((_,index)=>{
        if(_.name.includes(this.state.names)){
          filters.push(_)
        }
      });
    }
    let ops = [];
    if( oos !== undefined){
       ops = filters.filter((item) => item.severity.props.children === oos );
    }else{
        ops = filters;
    }
    this.setState({data:ops,total1:filters.length});

  }  

  getDatas2 = ()=>{
    let datas= [];
    let timer =  dateFormater("YYYY-mm-dd HH:MM:SS",new Date());
    let count = Math.random() * 10 > 5 ? 1: Math.random()
    const slice = timeLineData.slice(0,count);
    for (let i = 0; i < 24; i++) {
      datas.push({
          key: i,
          id: 'WT00'+Math.floor(Math.random() * 10000000),
          name: views[Math.floor(Math.random() * 10)],
          income: Math.floor(Math.random() * 100)+' 亿元',
          policy:i%3 == 0 ? '《民法典》相关政策':'《西安市基础民生管理办法规定2020版》',
          type: des[Math.floor(Math.random() * 10)]['name'],
          startTime: timer,
          endTime: `2023-0${Math.floor(Math.random() * 10)}-0${Math.floor(Math.random() * 10)} 1${Math.floor(Math.random() * 10)}: 2${Math.floor(Math.random() * 10)}: 0${Math.floor(Math.random() * 10)}`,
          age:  Math.floor(Math.random() * 10)+' 万人',
          status:'处理中',
          compared: i%2 == 0 ? <span style={{color:'#3f8600'}}><ArrowUpOutlined style={{color:'#3f8600'}} />{Math.floor(Math.random() * 10)+'%'}</span> : <span style={{color:'#cf1322'}}><ArrowDownOutlined style={{color:'#cf1322'}}/>{Math.floor(Math.random() * 10)+'%'}</span> ,
          address:  Math.floor(Math.random() * 100) >= 50 ? `西安市莲湖区桃源路第${Math.floor(Math.random() * 100)}号` : `西安市未央区路第${Math.random() * 100}号`,
          description: i%2 == 0 ? '景区人员拥挤，注意防疫': '景区人员稀疏,安全系数高',
          star:  i%2 == 0 ? <Rate disabled style={{marginLeft:5}} defaultValue={3} /> : <Rate disabled style={{marginLeft:5}} defaultValue={5} />,
          grade: Math.floor(Math.random() * 10)+'级',
          ranking: Math.floor(Math.random() * 100),
          severity: i%2 == 0 ? <span style={{color:'#f36052'}}>严重</span> : <span style={{color:'#f9e681'}}>轻微</span>,
          progress: slice
      });
    }
    let filters = [];
    if(this.state.names === ''){
      filters = datas;
    }else{
      datas.forEach((_,index)=>{
        if(_.name.includes(this.state.names)){
          filters.push(_)
        }
      });
    }
    this.setState({data2:filters,total2:filters.length})
  }    

  getDatas3 = ()=>{
    let datas= [];
    let timer =  dateFormater("YYYY-mm-dd HH:MM:SS",new Date());
    let count = Math.random() * 10 > 5 ? 0: Math.random()
    const slice = timeLineData.slice(0,count);
    for (let i = 0; i < 18; i++) {
      datas.push({
          key: i,
          id: 'WT00'+Math.floor(Math.random() * 10000000),
          name: views[Math.floor(Math.random() * 10)],
          income: Math.floor(Math.random() * 100)+' 亿元',
          policy:i%3 == 0 ? '《民法典》相关政策':'《西安市基础民生管理办法规定2020版》',
          type: des[Math.floor(Math.random() * 10)]['name'],
          age:  Math.floor(Math.random() * 10)+' 万人',
          status:'已完成',
          startTime: timer,
          endTime: `2023-0${Math.floor(Math.random() * 10)}-0${Math.floor(Math.random() * 10)} 1${Math.floor(Math.random() * 10)}: 2${Math.floor(Math.random() * 10)}: 0${Math.floor(Math.random() * 10)}`,
          compared: i%2 == 0 ? <span style={{color:'#3f8600'}}><ArrowUpOutlined style={{color:'#3f8600'}} />{Math.floor(Math.random() * 10)+'%'}</span> : <span style={{color:'#cf1322'}}><ArrowDownOutlined style={{color:'#cf1322'}}/>{Math.floor(Math.random() * 10)+'%'}</span> ,
          address: Math.floor(Math.random() * 100) >= 50 ? `西安市雁塔区繁花${Math.floor(Math.random() * 10)}路第${i+2}号` : `西安市高新区锦业${i}路第${i+12}号`,
          description: i%2 == 0 ? '景区人员拥挤，注意防疫': '景区人员稀疏,安全系数高',
          star:  i%2 == 0 ? <Rate disabled style={{marginLeft:5}} defaultValue={4} /> : <Rate disabled style={{marginLeft:5}} defaultValue={5} />,
          grade: Math.floor(Math.random() * 10)+'级',
          ranking: Math.floor(Math.random() * 100),
          severity: i%2 == 0 ? <span style={{color:'#f36052'}}>严重</span> : <span style={{color:'#f9e681'}}>轻微</span>,
          progress: slice
      });
    }
    let filters = [];
    if(this.state.names === ''){
      filters = datas;
    }else{
      datas.forEach((_,index)=>{
        if(_.name.includes(this.state.names)){
          filters.push(_)
        }
      });
    }
    this.setState({data3:filters,total3:filters.length})
  }  

  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
  }

  onChartClick(param,echarts){
    console.log(param)
  }  

  onChartLegendselectchanged(param,echarts){
    console.log(param)
  }
  getDescriptions = () =>{
    let num = Math.floor(Math.random() * 10)
    let dds = 0;
    if(num >3){
       dds = des[3];
    }else{
       dds = des[num];
    }
    let count = Math.floor(Math.random() * 10) > 5 ? 1: Math.floor(Math.random() * 10)
    const slice = timeLineData.slice(0,count);
    this.setState({descriptions:dds,timeLineList: slice})
  }

  updateDescriptions = () =>{
    this.setState({ 
      loadings: true,
      descriptions:{},
     });
    setTimeout(() => {
      this.setState({
        loadings: false,
      });
      this.getDescriptions();    
    }, 1000);
  }

  onSelect = (selectedKeys, info) => {
    this.updateDescriptions();
    console.log('selected', selectedKeys, info);
  };

  onCheck = (checkedKeys, info) => {
    this.updateDescriptions();
    console.log('onCheck', checkedKeys, info);
  };

  onChanges = (value) => {
    console.log(`selected ${value}`);
    this.updateData(value);

  }
  
  onSearchs  = (val) => {
    console.log('search:', val);
  }

  render() {
    const { img1, data, data2, data3, loading, names, total1, total2, total3, defaultDate, descriptions, loadings, timeLineList, columns } = this.state;
    let onEvents={
      'click': this.onChartClick.bind(this),
      'legendselectchanged': this.onChartLegendselectchanged.bind(this)
    }
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />          
        <div style={{width:'94%',height:'100%',margin:'0 auto'}}>              
          <div style={{textAlign:'left',marginTop:20,marginBottom:20}}>
          <Title level={5}><span>民生问题</span></Title>
        </div>   
        <div style={{overflowY: 'hidden'}}> 
          <div style={{float:'left',width:'18%'}}>
              <Tree
                  defaultExpandedKeys={['0-0-0-0-0']}
                  defaultSelectedKeys={['0-0-0-0-0']}
                  defaultCheckedKeys={['0-0-0-0-0']}
                  onSelect={this.onSelect}
                  onCheck={this.onCheck}
                  treeData={treeData}
                />
          </div>
          <div style={{float:'left',width:'58%'}}>
              {
                  loadings === true ?
                  <div style={{textAlign:'center',marginTop:100}}>
                    <><Spin /> 加载中...</>
                  </div>:
                  <>
                   <Descriptions title="问题处置详细信息">
                      <Descriptions.Item label="问题名称">{descriptions.name}</Descriptions.Item>
                      <Descriptions.Item label="热线">{descriptions.phone}</Descriptions.Item>
                      <Descriptions.Item label="处理等级">{descriptions.level}</Descriptions.Item>
                      <Descriptions.Item label="处理单位">{descriptions.company}</Descriptions.Item>
                      <Descriptions.Item span={2} label="单位地址">
                      {descriptions.address}
                      </Descriptions.Item>
                      <Descriptions.Item label="所属类别">{descriptions.category}</Descriptions.Item>
                    </Descriptions> 
                  </>
                }
          </div>  
          <h3 style={{fontWeight:600}}>问题处理进展:</h3>
          <div style={{float:'left',width:'23%',marginTop:12,height:376,}}>
            {
              loadings === true ?
              <div style={{textAlign:'center',marginTop:100}}>
                <><Spin /></>
              </div>:
              <Timeline pending={true}>
              {
                timeLineList.map((it)=>{
                  return (
                    <Timeline.Item key={it.key} color={it.color}>
                        <p>{it.line1}</p>
                        <p>{it.line2}</p>
                        <p>{it.line3}</p>                              
                    </Timeline.Item>
                  )
                })
              }
            </Timeline>
            }

          </div>               
        </div>  
        <Divider />
        <div>
            <div style={{textAlign:'left',margin:15,marginTop:25}}>
              <span style={{marginRight:20}}>
                问题ID: <Input value={names} style={{width:200,marginLeft:5}} onChange={this.nameChange} onPressEnter={this.onPressEnter} allowClear={true} placeholder="请输入企业名称回车搜索" />
              </span>
              <span style={{marginRight:20}}>
                  日期: <DatePicker style={{width:300,marginLeft:5}} defaultValue={defaultDate} onChange={this.onDateChange} />
              </span>  
              <span style={{marginRight:20}}>
              严重程度: 
                <Select
                  style={{width:200,marginLeft:5}}
                  showSearch
                  placeholder="请选择类型严重程度"
                  optionFilterProp="children"
                  onChange={this.onChanges}
                  onSearch={this.onSearchs}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }>
                  <Option value="严重">严重</Option>
                  <Option value="轻微">轻微</Option>
                </Select>
              </span>
              <span style={{marginRight:20}}>
                  <Button icon={<RedoOutlined />} onClick={this.reset} type="primary">重置</Button>
              </span>          
            </div>
            <Tabs defaultActiveKey="1" type="card" onChange={this.callback}>
                <TabPane    
                    tab={
                      <span>
                        <InfoCircleOutlined style={{color:'#f81d22'}} />
                        未处理问题
                      </span>
                    } key="1">
                  <div>
                      <Table
                        columns={columns}
                        loading={loading}
                        size="small"
                        pagination={{pageSize:5,
                          total:{total1},
                          showTotal:(total) => `共 ${total} 个`,
                        }}
                        dataSource={data}
                      />
                  </div>                
                </TabPane>
                <TabPane 
                  tab={
                    <span>
                    <ClockCircleOutlined style={{color:'#ffe58f'}} />
                      处理中问题
                    </span>
                  }
                key="2">
                  <div>
                      <Table
                        columns={columns}
                        loading={loading}
                        size="small"
                        pagination={{pageSize:5,
                          total:{total2},
                          showTotal:(total) => `共 ${total} 个`,
                        }}
                        dataSource={data2}
                      />
                  </div> 
                </TabPane>
                <TabPane 
                  tab={
                    <span>
                      <CheckCircleOutlined style={{color:'#52c41a'}} />
                      已处理问题
                    </span>
                  }              
                  key="3">
                  <div>
                      <Table
                        columns={columns}
                        loading={loading}
                        size="small"
                        pagination={{
                          pageSize:5, 
                          total:{total3},
                          showTotal:(total) => `共 ${total} 个`,
                          onShowSizeChange: this.onShowSizeChange
                        }}
                          dataSource={data3}
                      />
                  </div> 
                </TabPane>              
            </Tabs>
          </div>
        </div>
      </>
    )
  }
}
